<template>
  <el-row style="height: 72px;border-radius: 16px;margin-bottom:6px;float: left;display: flex" class="item-container">
    <el-col style="width: 72px;height: 72px;">
      <el-image
        style="width: 40px; height: 40px;margin: 16px;" :src=diskType fit="fit"></el-image>
    </el-col>
    <el-col style="flex: 1;height: 72px;padding: 16px 4px;">
      <el-row style="text-align: revert;height: 24px;">
        {{nameP}}
      </el-row>
      <el-row style="width: 100%;">
        <el-progress :percentage=percentageP :stroke-width=1 :color=colorP text-color="#ffffff"></el-progress>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import cd_png from '@/assets/dashboard/cd.png'
import disk_png from '@/assets/dashboard/disk.png'
import iscsi_png from '@/assets/dashboard/iscsi.png'
import nfs_png from '@/assets/dashboard/nfs.png'
import smb_png from '@/assets/dashboard/smb.png'
import usb_png from '@/assets/dashboard/usb.png'


export default {
  name: "diskItem",
  props: {
    nameP: {
      type: String,
      default: "磁盘",
    },
    diskTypeP: {
      type: String,
      default: "disk"
    },
    percentageP: {
      type: Number,
      default: 0
    },
    colorP: {
      type: String,
      default: "#000000"
    }
  },
  data() {
    return {
      diskType: disk_png,
      color: 0x000000,
    }
  },
  created() {
    switch (this.diskTypeP) {
      case "cd":
        this.diskType = cd_png;
        break;
      case "disk":
        this.diskType = disk_png;
        break;
      case "iscsi":
        this.diskType = iscsi_png;
        break;
      case "nfs":
        this.diskType = nfs_png;
        break;
      case "smb":
        this.diskType = smb_png;
        break;
      case "usb":
        this.diskType = usb_png;
        break;
    }
  },
  computed: {},
  filters: {}
}
</script>
<style scoped>

.item-container {


  color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 1.4vw;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;



  //position: relative;
  //background: rgba(255, 255, 255);
  //backdrop-filter: blur(12px);
  //-webkit-backdrop-filter: blur(12px);
  //transition: all 0.3s ease;
}






</style>
